<template>
  <div>

    <div v-if="selStyle === 2" class="selStyle2 flex flex_between" @click="getFamilys">
      <span>问诊人</span>
      <div class="flex flex_vcenter">
        <div class="text-gray" v-if="!selectedUser">点击选择问诊人</div>
        <div class="selectedStyle flex flex_vcenter" v-else>
          <img src="../assets/wzjl/icon_zxwz_jzr.png" alt="">
          <span>{{selectedUser.realname}}</span>
        </div>
        <i class="arrowRight ml10"></i>
      </div>
    </div>

    <div class="select-role flex flex_between" @click="getFamilys" v-else>
      <div class="roleLeft flex flex_vcenter">
        <img src="../assets/icon_mzfy_user.png" alt="">
        <span class="ml10">{{username}}</span>
      </div>
      <div class="roleRight flex flex_vcenter">
        <span style="display:inline-block;width:140px;" class="text-right">切换就诊人</span>
        <img src="../assets/arrow_whit.png" alt="">
      </div>
    </div>

    <mu-dialog :open="sel_family_dialog" dialogClass="fullwidth" @close="close" style="border-radius:0;">
      <ul class="rfamilylist">
        <li v-for="(value,index) in familys" class="familyitem re" :key="index" @click="selperson(value)">
          <img src="../assets/child_man.png" v-if="value.sexcode==1 && (jsGetAge(value.birthdate) <= 14)"/>
          <img src="../assets/child_women.png" v-if="value.sexcode==2 && (jsGetAge(value.birthdate) <= 14)"/>
          <img src="../assets/middle_man.png" v-if="value.sexcode==1 && (jsGetAge(value.birthdate) > 14) && (jsGetAge(value.birthdate) <= 60)"/>
          <img src="../assets/middle_women.png" v-if="value.sexcode==2 && (jsGetAge(value.birthdate) > 14) && (jsGetAge(value.birthdate) <= 60)"/>
          <img src="../assets/old_man.png" v-if="value.sexcode==1 && (jsGetAge(value.birthdate) > 60)"/>
          <img src="../assets/old_women.png" v-if="value.sexcode==2 && (jsGetAge(value.birthdate) > 60)"/>
          <span class="runame">{{value.realname}}</span>
          <img v-if="value.certificationValidityPeriod !== '1'"  @click="goToCheck(value)" src="../assets/service/btn_去认证.png" class="auth"/>
          <img v-else src="../assets/service/icon_0404_zyyjj_check.png" class="auth2"/>
        </li>
        <li v-show="familys.length < 6" class="familyitem" @click="addPerson">
          <img src="../assets/service/add_images.png"/>
          <span class="runame">添加就诊人</span>
        </li>
      </ul>
    </mu-dialog>
  </div>
</template>

<script>
  import {formatDate} from '@/common/js/util'
  import {commonAjaxJson, RESTFUL_API} from '@/api/api'

  export default {
    data () {
      return {
        hospitalCode: sessionStorage.getItem("hospitalCode") || "",
        familys: [],
        sel_family_dialog: false,
        familyPerson: JSON.parse(sessionStorage.familyPerson || '{}'),
        username: '',
        selectedUser: ''
      }
    },
    props: ['selStyle'],
    mounted () {
      this.username = this.familyPerson.realname
    },
    methods: {
      goToCheck (val) {
        this.$router.push({
          path: '/setting/bind-visitcard',
          query: val
        })
      },
      selperson (val) {
        this.sel_family_dialog = false
        this.username = val.realname
        this.selectedUser = val
        val.allPatientCodes = this.getAllCodes(val)
        sessionStorage.familyPerson = JSON.stringify(val)
        this.$emit('liclick', val)
      },
      addPerson () {
        this.$router.push('/setting/family/add')
      },
      getFamilys () {
        commonAjaxJson(RESTFUL_API.listFamily, {userId: sessionStorage.userId}, true).then(res => {
          if (res.data.code == 200) {
            this.sel_family_dialog = true
            this.familys = res.data.data || []
          } else {
            this.$store.commit('UPDATE_TOAST', {
              message: res.msg
            })
          }
        })
      },
      getAllCodes (val) {
        let temp = []
        if (val.hisBusCardList && val.hisBusCardList.length > 0) {
          val.hisBusCardList.forEach(v => {
            temp.push(v.patientCode)
          })
          return temp
        }
        return ''
      },
      close () {
        this.sel_family_dialog = false
      },
      jsGetAge (strBirthday) {
        strBirthday = formatDate(new Date(strBirthday), 'yyyy-MM-dd')
        let returnAge
        let strBirthdayArr = strBirthday.split('-')
        let birthYear = strBirthdayArr[0]
        let birthMonth = strBirthdayArr[1]
        let birthDay = strBirthdayArr[2]

        let d = new Date()
        let nowYear = d.getFullYear()
        let nowMonth = d.getMonth() + 1
        let nowDay = d.getDate()

        if (nowYear === birthYear) {
          returnAge = 0
        } else {
          var ageDiff = nowYear - birthYear
          if (ageDiff > 0) {
            if (nowMonth === birthMonth) {
              var dayDiff = nowDay - birthDay
              if (dayDiff < 0) {
                returnAge = ageDiff - 1
              } else {
                returnAge = ageDiff
              }
            } else {
              var monthDiff = nowMonth - birthMonth
              if (monthDiff < 0) {
                returnAge = ageDiff - 1
              } else {
                returnAge = ageDiff
              }
            }
          } else {
            returnAge = -1
          }
        }
        return returnAge
      }
    }
  }
</script>

<style lang="less">
  @import '../common/css/flex.css';
  @import "../common/css/component";
  .select-role {
    padding:8px 10px;
    span {
      color:white;
      font-size:16px;
    }
    .roleRight{
      img{
        margin-left:10px;
        height:16px;
      }
    }
  }
  .rfamilylist{
    display:flex;
    -webkit-display: flex;
    flex-wrap:wrap;
    -webkit-flex-wrap: wrap;
  }
  .rfamilylist>li{
    width:33.333%;
    padding:5px;
    .icon-zengjia {
      display: block;
      text-align: center;
      font-size: 4em;
      color: #0EE0AC;
    }
    .runame {
      padding-top: 8px;
    }
    .auth{
      width:60px;
      position: absolute;
      top:70px;
      right: 25px;
    }
    .auth2 {
      width:22px;
      position: absolute;
      top:70px;
      right: 20px;
    }
  }
  .familyitem>img{
    width:80%;
    display: block;
    margin: auto;
  }
  .familyitem>span{
    display:block;
    width:100%;
    text-align:center;
  }
  .fullwidth{
    width:100%;
    align-self: flex-start;
  }
  .selStyle2{
    background-color: white;
    padding:10px;
  }
  .selectedStyle{
    color:@color-primary;
    img{
      width:24px;
      height:24px;
      margin-right:10px;
    }
  }
</style>
